const KeyBoard = (function (){ 
    function KeyBoard(id){
        this.keyList = ["AC", "(", ")", "←","sin","cos","tan","cot","|","^","%","π","1","2","3","+","4","5","6","-","7","8","9","×",".","0","=","÷"];
        this.$root = undefined;
        this.$screen = undefined;
        this.keyTemp = [];
        this.initKeyboard(id);
    }
    Object.assign(KeyBoard.prototype, {
        initKeyboard(id) {
            if (!id || !document.getElementById(id)) {
                throw new Error("缺少参数：id");
            }
            this.$root = document.getElementById(id);
            this.renderScreen();
            this.renderKey();
            let _this = this;
            window.addEventListener("keydown", function(e) {
                if (e.keyCode == 13) {
                    _this.inputKey("=");
                }
                
            })
        },
        renderKey() {
            let keyboard = document.createElement("ul");
            keyboard.setAttribute("id", "keyboard");
            let list = this.keyList;
            let tpl = "";
            for(let i = 0;i < list.length;i++) {
                tpl += `<li data-key="${list[i]}">${list[i]}</li>`;
            }
            keyboard.innerHTML = tpl;
            this.$root.appendChild(keyboard);
            let _this = this;
            keyboard.onclick=function(e) {
                let dom = e.target;
                if (dom.dataset.key) {
                    _this.inputKey(dom.dataset.key);
                }
            }
            
        },

        renderScreen() {
            let inputWrap = document.createElement("div");
            inputWrap.className = "input-wrap";
            let screen = document.createElement("input");
            screen.setAttribute("type", "text");
            let expBox = document.createElement("p");
            expBox.setAttribute("class", "expression");
            inputWrap.appendChild(screen);
            inputWrap.appendChild(expBox);
            this.$root.appendChild(inputWrap);
            this.$screen = screen;
            this.$expression = expBox;
        },

        // 创建一个自定义事件
        createEvent(msg) {
            // 由于event.initEvent已经被弃用，所以，不使用该方法
            // HTMLEvents事件类型，固定写即可，无需修改
            // let event = document.createEvent("HTMLEvents");   
            // event.initEvent("calc", true, true);
            // event.message=msg;
            let event = new Event("calc", {
                bubbles: true,  // 是否冒泡
                cancelable: true   // 是否取消默认行为
            });
            event.message = msg;
            return event;
        },

        inputKey(key) {
            this.$expression.innerHTML = "";
            if (key == "AC") {
                this.$screen.value = "";
                this.keyTemp = [];
            } else if (key == "←") {
                this.keyTemp.pop();
                this.$screen.value = this.keyTemp.join("");
            } else if (key == "=") {
                let _event = this.createEvent(this.$screen.value)
                window.dispatchEvent(_event);
            } 
            else {
                this.keyTemp.push(key);
                this.$screen.value = this.keyTemp.join("");
            }
        },

        setResult(exp, res) {
            this.$screen.value = res;
            this.$expression.innerHTML = `${exp}=`;
        },

    })

    return KeyBoard;
}())